<template>
	<view>
		<scroll-view scroll-y="true" class="scrollContent" :enhanced="true" :bounces="false" :show-scrollbar="false">
			<view class="userCenter">
				<view class="content mt10 mb30">
					<!-- <u-cell-group :border="false">
						<u-cell title="昵称" :value="userInfo.customerName" :isLink="true" rightIcon="arrow-right"
							arrowDirection="right" @click="openNameModal()"></u-cell>
						<u-cell title="性别" :value="userInfo.sex==0?'女':'男'" :isLink="true" rightIcon="arrow-right"
							arrowDirection="right" @click="openSexModal()"></u-cell>
						<u-cell title="出生年月" :value="userInfo.customerBirthday" :isLink="true" rightIcon="arrow-right"
							arrowDirection="right" @click="openYearModal()"></u-cell>
					</u-cell-group> -->
					<view class="mb10">
						<view style="padding-left: 8px;" class="content_title">昵称</view>
						<view>
							<u--input placeholder="请输入内容" border="bottom" v-model="userInfo.customerName"></u--input>
						</view>
					</view>

					<view class="mb10 center_line">
						<view class="mb10 content_title">性别</view>
						<view>
							<u-radio-group v-model="userInfo.sex">
								<u-radio :customStyle="{marginRight: '30px'}" activeColor="#38d19a" shape="circle" label="女"
									:name="0"></u-radio>
								<u-radio activeColor="#38d19a" shape="circle" label="男" :name="1"></u-radio>
							</u-radio-group>
						</view>
					</view>

					<view class="center_line" @click="openYearModal()">
						<view class="mb10 content_title">生日</view>
						<view>
							<view class="d-flex j-sb">
								<view class="content_value">
									<view class="">{{userInfo.customerBirthday || praseStrEmpty}}</view>
								</view>
								<view class="">
									<uni-icons type="forward" size="20" color="#999999"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="w100p my_center">
					<view @click="updateUserInfo()"
						style="width:80%;height: 37px;line-height: 37px; text-align: center; background-color: #38d19a;color: #ffffff;font-size: 30rpx;">
						更新</view>
				</view>

				<u-modal :show="show" :title="title" :showCancelButton="true" @cancel="show = false" @confirm="editUserName()">
					<view class="w100p">
						<u--input placeholder="请输入内容" border="surround" v-model="customerName"></u--input>
					</view>
				</u-modal>

				<u-picker :show="psShow" :columns="list" :defaultIndex="[userInfo.sex]" @cancel="psShow = false"
					@confirm="selectClick()"></u-picker>

				<u-datetime-picker ref="datetimePicker" :minDate="minDate" :maxDate="maxDate" :show="popupShow"
					v-model="customerBirthday" mode="date" @cancel="popupShow = false" @confirm="editTime()"></u-datetime-picker>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		updateCustomerByApp
	} from '@/api/index'

	export default {
		onLoad() {
			// 最小时间
			this.minDate = Number(new Date("1949-10-01"));
			// 最大时间
			this.maxDate = Date.now();;
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.iconInfo = uni.getStorageSync('iconInfo')
		},
		onReady() {
			// 隐藏导航栏
			// uni.hideTabBar({});
		},
		data() {
			return {
				// background_img: uni.getStorageSync('setUrl'),
				userInfo: {
					customerName: "",
					sex: "",
					customerBirthday: "",
				},
				show: false,
				title: '修改昵称',
				customerName: '',

				list: [
					['女', '男']
				],
				psShow: false,
				popupShow: false,
				customerBirthday: Number(new Date()),
				minDate: null, // 设置最小时间
				maxDate: null,
			}
		},
		methods: {
			updateUserInfo() {
				const that = this

				if (!that.userInfo.customerName) {
					uni.showToast({
						title: '昵称不能为空',
						duration: 1000,
						icon: 'none'
					});
					return
				}
				if (!that.userInfo.sex) {
					uni.showToast({
						title: '请选择性别',
						duration: 1000,
						icon: 'none'
					});
					return
				}
				if (!that.userInfo.customerBirthday) {
					uni.showToast({
						title: '请选择生日',
						duration: 1000,
						icon: 'none'
					});
					return
				}
				
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				updateCustomerByApp({
					customerCode: this.userInfo.customerCode,
					customerName: this.userInfo.customerName,
					sex: this.userInfo.sex,
					customerBirthday: this.userInfo.customerBirthday,
				}).then(res => {
					if (res.status == '200') {
						this.userInfo = res.object
						uni.setStorageSync('userInfo', res.object)
				
						uni.hideLoading()
						uni.showToast({
							title: '修改成功',
							duration: 1000
						});
					}
				})
			},

			//  昵称
			openNameModal() {
				this.customerName = this.userInfo.customerName
				this.show = true
			},

			editUserName() {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				updateCustomerByApp({
					customerCode: this.userInfo.customerCode,
					customerName: this.customerName,
				}).then(res => {
					if (res.status == '200') {
						this.userInfo = res.object
						uni.setStorageSync('userInfo', res.object)

						uni.hideLoading()
						uni.showToast({
							title: '修改成功',
							duration: 1000
						});

						this.show = false
					}
				})
			},

			// 性别
			openSexModal() {
				this.psShow = true
			},
			// 性别
			selectClick(val) {
				console.log(val);
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				updateCustomerByApp({
					customerCode: this.userInfo.customerCode,
					sex: val.indexs[0],
				}).then(res => {
					if (res.status == '200') {
						this.userInfo = res.object
						uni.setStorageSync('userInfo', res.object)

						uni.hideLoading()
						uni.showToast({
							title: '修改成功',
							duration: 1000
						});

						this.psShow = false
					}
				})

			},

			openYearModal() {
				this.popupShow = true
			},

			timestampToYMD(timestamp) {
				const date = new Date(timestamp); // 将时间戳转换成毫秒
				const year = date.getFullYear();
				const month2 = date.getMonth() + 1;
				let month = ""
				if (month2 < 10) {
					month = '0' + month2
				} else {
					month = month2
				}
				const day = date.getDate();
				return `${year}-${month}-${day}`;
			},

			editTime(value) {
				const date = this.timestampToYMD(value.value)
				this.userInfo.customerBirthday = date
				this.popupShow = false
				
				// uni.showLoading({
				// 	title: '加载中',
				// 	mask: true
				// });
				// updateCustomerByApp({
				// 	customerCode: this.userInfo.customerCode,
				// 	customerBirthday: date,
				// }).then(res => {
				// 	if (res.status == '200') {
				// 		this.userInfo = res.object
				// 		uni.setStorageSync('userInfo', res.object)

				// 		uni.hideLoading()
				// 		uni.showToast({
				// 			title: '修改成功',
				// 			duration: 1000
				// 		});
				// 		this.popupShow = false
				// 	}
				// })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.scrollContent {
		//可视高度，需要在多大的盒子中进行滑动
		height: 100vh;
		width: 100%;
	}

	.userCenter {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f5f5f5;
		height: 100vh;
		font-family: Source Han Sans CN, Source Han Sans CN-500 !important;

		.content {
			width: 700rpx;
			box-sizing: border-box;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
			border-radius: 16rpx;
			background-color: #fff;
			padding: 40rpx;

			.center_line {
				padding-left: 8px;
				padding-bottom: 8px;
				border-bottom-width: 0.5px !important;
				border-color: #dadbde !important;
				border-bottom-style: solid;
			}

			.content_title {
				font-size: 24rpx;
			}

			.content_value {
				font-size: 30rpx;
			}
		}
	}
</style>